<template>
  <div>
    <el-table :data="arr" style="width: 100%">
      <el-table-column label="Student ID" prop="student_id"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="Evaluation Year" prop="evaluation_year"></el-table-column>
      <el-table-column label="Evaluation Semester" prop="evaluation_semester"></el-table-column>
      <el-table-column label="Teacher Evaluation" prop="teacher_evaluation"></el-table-column>
    </el-table>
    <div>
      <el-button @click="exportExcel">Export</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';

let arr = ref([
  {
    "index": 9,
    "student_id": "2021130028",
    "name": "Shen Qi",
    "evaluation_year": "2022-2023",
    "evaluation_semester": 1
  },
  {
    "student_id": "2021130028",
    "name": "Shen Qi",
    "evaluation_year": "2022-2023",
    "evaluation_semester": 2,
    "teacher_evaluation": 88
  },
  {
    "index": 29,
    "student_id": "2021130092",
    "name": "Kong Deqi",
    "evaluation_year": "2022-2023",
    "evaluation_semester": 1
  },
  {
    "student_id": "2021130092",
    "name": "Kong Deqi",
    "evaluation_year": "2022-2023",
    "evaluation_semester": 2,
    "teacher_evaluation": 88
  },
  {
    "index": 6,
    "student_id": "2021130093",
    "name": "Fu Tianhao",
    "evaluation_year": "2022-2023",
    "evaluation_semester": 1
  },
  {
    "student_id": "2021130093",
    "name": "Fu Tianhao",
    "evaluation_year": "2022-2023",
    "evaluation_semester": 2,
    "teacher_evaluation": 88
  },
  {
    "index": 31,
    "student_id": "2021130121",
    "name": "Yan Baojun",
    "evaluation_year": "2022-2023"
  }
]);

const formatJson = (data) => {
  return data.map(item => {
    return [
      item.student_id,
      item.name,
      item.evaluation_year,
      item.evaluation_semester,
      item.teacher_evaluation || ''
    ];
  });
}

async function exportExcel() {
  const excel = await import('./Export2Excel.js');
  excel.export_json_to_excel({
    header: ['Student ID', 'Name', 'Evaluation Year', 'Evaluation Semester', 'Teacher Evaluation'],
    // data是二维数组
    data: formatJson(arr.value),
    filename: 'Student Grades'
  });
}
</script>

<style scoped>

</style>
